import React, { useEffect, useState, useRef } from "react";
import "./index.less";
import { NavBar} from "antd-mobile";
import { useNavigate} from "react-router-dom";
import { questionnairePage } from "../service";
import { InfiniteScroll } from "antd-mobile";
const ActivityOrTraining: React.FC = () => {
  const navigate = useNavigate();
  const ContentRef = useRef(null);
  const [listData, setListData] = useState([]);
  const [hasMore, setHasMore] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const goto = (url: string) => () => {
    navigate(url);
  }
  const getData = async () => {
    try {
      const res = await questionnairePage({
        villageCode: "511602006004",
        current: 1,
        size: "10",
      });
      if (res?.success){
        setListData(res?.data?.records);
      }
    } catch (error) {
      console.log(error);
    }
  };
  useEffect(() => {
    getData();
  }, []);

  async function loadMore() {
    let current = currentPage + 1;
    try {
      const res = await questionnairePage({
        current: current,
        size: "10",
      });
      let datas = res?.data?.records || [];
      setListData((val) => [...val, ...datas]);
      setCurrentPage(res?.data?.current);
      setHasMore(false);
    } catch (error) {
      throw new Error("mock request failed");
    }
  }

  return (
    <div className="ActivityOrTraining_contarnier">
      <div className="header-bg">
        <NavBar
          onBack={() => navigate("/intelligentGovernance")}
        >
          <div className="commontitle">问卷调查</div>
        </NavBar>
      </div>
      <div className="ActivityOrTraining-content"
        ref={ContentRef}
        onScroll={() => {
          let scrollTop = ContentRef?.current?.scrollTop;
          let Dvalue =
            ContentRef?.current?.scrollHeight -
            ContentRef?.current?.clientHeight;
          if (scrollTop >= Dvalue) setHasMore(true);
        }}
      >
        {
          listData?.map((item, index) => {
            return <div key={index} className="content_Item"
              onClick={goto(`/intelligentGovernance/questionnaireSurvey?detail=${item?.id}`)}
            >
              <img
                src={item?.img || "/images/mycommunity/noImage.jpg"} className="cover_img"></img>
              <div className="detail_box">
                <div className="detail_box-top">{item?.title}</div>
                <div className="detail_box-center">{item?.address}</div>
                <div className="detail_box-bottom">
                  <div className="detail_box-bottom-type">{item?.type}</div>
                  {/* <div className="detail_box-bottom-time">{item?.questionnaireCreateTime}至{item?.questionnaireEndTime}</div> */}
                  <div className="detail_box-bottom-time">参与人数：<span>{item?.userCount}</span></div>
                </div>
              </div>
            </div>
          })
        }
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </div>

    </div>
  );
};

export default ActivityOrTraining;
